<template>
  <div class="latestnews">
    <b-container fluid v-show="isNewView">
        <div>
            <b-jumbotron header="我的备忘录" lead="备忘录列表">
                <p>For more information visit website</p>
                <b-button variant="success"  :to="{name: 'editing', params: {id: -1}}">添加新备忘录</b-button>
            </b-jumbotron>
        </div>
        <b-list-group>
            <b-list-group-item v-for="item in items" :key="item.noteId">
                <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ item.title }}</h5>
                <small>{{ item.createTime }}</small>
                </div>

                <p class="mb-1">
                {{ item.content }}
                </p>
                <div class="d-flex w-100 justify-content-between">
                <small>{{ item.tag }}</small>
                <b-button-group>
                    <b-button size="sm" variant="primary" :to="{name: 'editing', params: {id: item.noteId}}">
                        <b-icon icon="pencil-fill"></b-icon> 编辑
                    </b-button>
                    <b-button size="sm" variant="danger" @click="executeDelete(item.noteId)">
                        <b-icon icon="trash-fill"></b-icon> 删除
                    </b-button>
                </b-button-group>
                </div>
            </b-list-group-item>
        </b-list-group>
    </b-container>
    <div v-show="!isNewView">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getNotebookList, getFilterNotebookList, deleteNote } from '../api/requests';

export default {
  name: 'Notebook',
  data() {
    return {
        mainImg: {
            center: true,
            fluidGrow: true,
            blank: true,
            blankColor: '#bbb',
            width: 600,
            height: 300,
            class: 'myImg'
        },
        isNewView: true,
        items: []
    }
  },
  created() {
    const keywords = localStorage.getItem("keywords");
    if (keywords) {
        var note = JSON.parse("{\"title\": \"" + keywords + "\"}");
        this.getFilterNotebookList(note);
        localStorage.setItem("keywords", '');
    }else {
        this.getNotebookList();
    }
    
  },
  watch: {
    //编辑或添加新备忘录时，跳转编辑页面
    $route(now){
        if (now.path === '/notebook/editing'){
            this.isNewView = false;
        } else if (now.path === '/notebook') {
            this.getNotebookList();
            this.isNewView = true;
        } else {
            this.isNewView = true;
        }
    }
  },
  methods: {
    async getNotebookList() {
        const data = await getNotebookList();
        if (data){
            this.items = data;
            //缓存备忘录列表到localstorage
            localStorage.setItem("notebooklist", JSON.stringify(this.items));
        }
    },
    async getFilterNotebookList(note) {
        const data = await getFilterNotebookList(note);
        if (data){
            this.items = data;
            //缓存备忘录列表到localstorage
            localStorage.setItem("notebooklist", JSON.stringify(this.items));
        }
    },
    confirmDelete() {
        return new Promise((resolve, reject) => {
            this.$bvModal.msgBoxConfirm('是否要删除此备忘录？', {
                title: '请确认',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'danger',
                okTitle: '是',
                cancelTitle: '否',
                footerClass: 'p-2',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                resolve(value);
            }).catch(err => {
                reject(err);
            });
        });
        
    },
    async executeDelete(id) {
        const del = await this.confirmDelete();
        if (del) {
            var note = JSON.parse("{\"noteId\": " + id + "}");
            const res = await deleteNote(note);
            if (res) {
                window.location.reload();
            }
        }
    }
  }
}
</script>

<style scoped>
</style>
